<template>
  <div id="wrapper">
    <div class="topbar">
      <div @click="closeWindown" title="关闭窗口" class="btn close"><Icon type="ios-close" /></div>
      <div @click="maxWindown" title="最大化" class="btn tomax"><Icon type="md-square-outline" /></div>
      <div @click="minWindown" title="最小化" class="btn tomin"><Icon type="ios-remove" /></div>
    </div>
    <div class="content">
      <div class="left">
        <div class="btn">
          <div class="item"><Icon type="ios-shirt-outline" /></div>
          <div class="item"><Icon type="ios-shirt-outline" /></div>
        </div>
        <vue-scroll @handle-scroll="listscroll" :ops="list.ops" class="list msg_user">
          <user-item :msgnum="item.newmsg_num" :onclicks="startMsg" :user="item" v-for="(item, index) in list.msg_user" :keys="index" :key="index"></user-item>
        </vue-scroll>
      </div>
      <div class="cont">
        <msg-window ref="msg_window" :sendMsgs="sendMsg" :user="indexuser" :csuser="user.user"></msg-window>
      </div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script>
  import userItem from '../../components/user-item/user-item.vue'
  import msgWindow from '../../components/msg-window/msg-window.vue'

  export default {
    name: 'Index',
    data: () => {
      return {
        indexuser: null,
        user: {
          user: {},
          token: '',
          type: 1002
        },
        list: {
          msg_user: [],
          user_list: [],
          ops: {
            vuescroll: {
              mode: 'native'
            },
            scrollPanel: {},
            rail: {
              size: '3px',
              gutterOfSide: '0px'
            },
            bar: {
              background: '#3e58c9',
              opacity: 0.6
            }
          }
        }
      }
    },
    components: {
      'user-item': userItem,
      'msg-window': msgWindow
    },
    created: function () {
      var that = this
      this.icp = this.electron.ipcRenderer
      new Promise(function (resolve, reject) {
        that.$fn.isLogin(that, function (err, data) { // 判断是否是登录状态
          if (err) {
            reject(err)
          } else {
            resolve(data)
          }
        })
      }).then(function (data) {
        return that.$fn.getLocaUser(that) // 获取用户信息
      }).then(function (user) {
        that.user = user
        return that.$fn.getUserlist(that) // 获取消息列表用户
      }).then(function (arr) {
        that.list = {}
        that.list.msg_user = arr
        that.sortUserList()
        that.$socket.emit('re_connect', { // 链接socket.io
          user: that.user.user,
          type: that.user.type
        })
      }).catch(function (err) {
        console.log(err)
        that.electron.ipcRenderer.send('open_login_window')
      })
      // 判断是否登录
    },
    methods: {
      sortUserList () {
        this.list.msg_user.sort(function (obj1, obj2) {
          return obj1.chatlog[obj1.chatlog.length - 1].send_time - obj2.chatlog[obj2.chatlog.length - 1].send_time
        }).reverse()
        this.$forceUpdate()
      },
      closeWindown () {
        // this.$electron.shell.openExternal(link)//在外部打开链接
        this.icp.send('close_main_window')
      },
      maxWindown () {
        this.icp.send('max_main_window')
      },
      minWindown () {
        this.icp.send('min_main_window')
      },
      openWindown () {
        this.icp.send('open_login_window')
      },
      listscroll (vertical) {
        if (vertical.process >= 1) {
          console.log('滚动到底了')
        }
      },
      startMsg (item, index) {
        this.list.msg_user[index].newmsg_num = 0
        this.indexuser = this.list.msg_user[index]
      },
      sendMsg (msg, user, index) {
        var that = this
        if (msg.type === 'text') {
          this.$fn.sendTextMsg(this, msg).then(function (response) {
            var data = response.data
            if (data.status === 1) {
              user.chatlog[index].send_state = 1
            } else {
              user.chatlog[index].send_state = 0
            }
            that.sortUserList()
          }).catch(function (err) {
            console.log(err)
            user.chatlog[index].send_state = 0
          })
        } else if (msg.type === 'image') {
          this.$fn.sendImgMsg(this, msg).then(function (response) {
            var data = response.data
            if (data.status === 1) {
              user.chatlog[index].send_state = 1
              user.chatlog[index].content = data.path
            } else {
              user.chatlog[index].send_state = 0
            }
            that.sortUserList()
          }).catch(function (err) {
            console.log(err)
            // user.chatlog[index].send_state = 0
          })
        }
      }
    },
    sockets: {
      re_connect: function (data) {
        var that = this
        that.$fn.setUsetType(that, 1).then(function (response) {
          // console.log(response)
        })
      },
      sendMsg: function (data) {
        console.log('收到消息', data)
        if (this.indexuser && this.indexuser.openid === data.openid) {
          this.indexuser.chatlog.push(data)
          this.indexuser.receiveMsg = true
        } else {
          console.log('不是当前会话窗口的')
          var isinuserlist = false
          this.list.msg_user.forEach(function (item) {
            if (item.openid === data.openid) {
              item.chatlog.push(data)
              item.newmsg_num = item.newmsg_num || 0
              item.newmsg_num += 1
              isinuserlist = true
            }
          })
          // this.$set(this.list, 'msg_user', this.list.msg_user)
          this.$forceUpdate()
          if (!isinuserlist) {
            console.log('不存在')
          }
        }
      }
    }
  }
</script>

<style  lang="less" scoped>
  @import "./style.less";

</style>
